<template>
  <view class="multimodal-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">多模态生成</text>
      <view class="nav-actions">
        <text class="nav-icon" @click="showHistory">📚</text>
      </view>
    </view>

    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 生成类型选择 -->
      <view class="type-section">
        <text class="section-title">选择生成类型</text>
        <view class="type-grid">
          <view 
            v-for="type in generationTypes" 
            :key="type.id"
            class="type-card"
            :class="{ active: selectedType === type.id }"
            @click="selectType(type.id)"
          >
            <text class="type-icon">{{ type.icon }}</text>
            <text class="type-name">{{ type.name }}</text>
            <text class="type-desc">{{ type.description }}</text>
          </view>
        </view>
      </view>

      <!-- 输入描述 -->
      <view class="input-section">
        <text class="section-title">输入描述</text>
        <textarea 
          v-model="inputDescription" 
          class="description-textarea" 
          placeholder="请详细描述您想要生成的内容..."
          placeholder-class="placeholder"
          maxlength="1000"
        />
        <text class="char-count">{{ inputDescription.length }}/1000</text>
      </view>

      <!-- 风格设置（图片生成） -->
      <view v-if="selectedType === 'image'" class="style-section">
        <text class="section-title">图片风格</text>
        <view class="style-options">
          <view 
            v-for="style in imageStyles" 
            :key="style.value"
            class="style-option"
            :class="{ active: generationSettings.imageStyle === style.value }"
            @click="generationSettings.imageStyle = style.value"
          >
            <text class="style-icon">{{ style.icon }}</text>
            <text class="style-name">{{ style.name }}</text>
          </view>
        </view>
      </view>

      <!-- 音频设置（音频生成） -->
      <view v-if="selectedType === 'audio'" class="audio-section">
        <text class="section-title">音频设置</text>
        <view class="audio-options">
          <view class="audio-option">
            <text class="option-label">语音类型</text>
            <picker 
              :range="voiceTypes" 
              range-key="name"
              @change="onVoiceTypeChange"
            >
              <view class="picker-value">
                {{ generationSettings.voiceType.name }}
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <view class="audio-option">
            <text class="option-label">语速</text>
            <slider 
              :value="generationSettings.speed" 
              min="0.5" 
              max="2" 
              step="0.1"
              @changing="onSpeedChange"
              activeColor="#FF69B4"
            />
            <text class="slider-value">{{ generationSettings.speed }}x</text>
          </view>
        </view>
      </view>

      <!-- 生成选项 -->
      <view class="options-section">
        <text class="section-title">生成选项</text>
        <view class="option-item">
          <text class="option-label">生成数量</text>
          <view class="quantity-selector">
            <text 
              class="quantity-btn"
              :class="{ disabled: generationSettings.quantity <= 1 }"
              @click="decreaseQuantity"
            >-</text>
            <text class="quantity-value">{{ generationSettings.quantity }}</text>
            <text 
              class="quantity-btn"
              :class="{ disabled: generationSettings.quantity >= 5 }"
              @click="increaseQuantity"
            >+</text>
          </view>
        </view>
      </view>

      <!-- 生成按钮 -->
      <view class="generate-section">
        <button 
          class="generate-btn" 
          :disabled="!canGenerate"
          @click="generateContent"
        >
          <text class="btn-text">开始生成</text>
          <text class="btn-icon">✨</text>
        </button>
      </view>

      <!-- 生成结果 -->
      <view v-if="generatedResults.length > 0" class="results-section">
        <text class="section-title">生成结果</text>
        <view class="results-grid">
          <view 
            v-for="(result, index) in generatedResults" 
            :key="index"
            class="result-item"
          >
            <!-- 图片结果 -->
            <view v-if="selectedType === 'image'" class="image-result">
              <image 
                :src="result.url" 
                class="result-image" 
                mode="aspectFit"
                @click="previewImage(result.url)"
              />
              <view class="result-actions">
                <text class="action-btn" @click="downloadResult(result)">下载</text>
                <text class="action-btn" @click="shareResult(result)">分享</text>
              </view>
            </view>

            <!-- 音频结果 -->
            <view v-if="selectedType === 'audio'" class="audio-result">
              <view class="audio-player">
                <text class="audio-icon">🎵</text>
                <text class="audio-title">生成音频 {{ index + 1 }}</text>
                <text class="play-btn" @click="playAudio(result)">▶️</text>
              </view>
              <view class="result-actions">
                <text class="action-btn" @click="downloadResult(result)">下载</text>
                <text class="action-btn" @click="shareResult(result)">分享</text>
              </view>
            </view>

            <!-- 文本结果 -->
            <view v-if="selectedType === 'text'" class="text-result">
              <text class="result-text">{{ result.content }}</text>
              <view class="result-actions">
                <text class="action-btn" @click="copyText(result)">复制</text>
                <text class="action-btn" @click="shareResult(result)">分享</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedType: 'image',
      generationTypes: [
        {
          id: 'image',
          name: '图片生成',
          icon: '🖼️',
          description: '根据描述生成动漫风格图片'
        },
        {
          id: 'audio',
          name: '音频生成',
          icon: '🎵',
          description: '文本转语音或生成音效'
        },
        {
          id: 'text',
          name: '文本生成',
          icon: '📝',
          description: '创意写作和内容生成'
        }
      ],
      inputDescription: '',
      generationSettings: {
        imageStyle: 'anime',
        voiceType: { value: 'female1', name: '少女音' },
        speed: 1,
        quantity: 1
      },
      imageStyles: [
        { value: 'anime', name: '动漫风', icon: '🎨' },
        { value: 'realistic', name: '写实风', icon: '📷' },
        { value: 'fantasy', name: '奇幻风', icon: '✨' },
        { value: 'cute', name: '可爱风', icon: '🐰' }
      ],
      voiceTypes: [
        { value: 'female1', name: '少女音' },
        { value: 'female2', name: '御姐音' },
        { value: 'male1', name: '少年音' },
        { value: 'male2', name: '大叔音' }
      ],
      generatedResults: []
    }
  },
  computed: {
    canGenerate() {
      return this.inputDescription.trim().length > 0
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showHistory() {
      uni.showModal({
        title: '生成历史',
        content: '查看和管理您的生成历史记录',
        showCancel: false
      })
    },
    selectType(typeId) {
      this.selectedType = typeId
      this.generatedResults = []
    },
    onVoiceTypeChange(e) {
      const index = e.detail.value
      this.generationSettings.voiceType = this.voiceTypes[index]
    },
    onSpeedChange(e) {
      this.generationSettings.speed = e.detail.value
    },
    decreaseQuantity() {
      if (this.generationSettings.quantity > 1) {
        this.generationSettings.quantity--
      }
    },
    increaseQuantity() {
      if (this.generationSettings.quantity < 5) {
        this.generationSettings.quantity++
      }
    },
    generateContent() {
      if (!this.canGenerate) {
        uni.showToast({
          title: '请输入描述',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '生成中...'
      })

      // 模拟生成过程
      setTimeout(() => {
        uni.hideLoading()
        
        const results = []
        for (let i = 0; i < this.generationSettings.quantity; i++) {
          if (this.selectedType === 'image') {
            results.push({
              id: Date.now() + i,
              type: 'image',
              url: '/static/image-placeholder.png',
              description: this.inputDescription
            })
          } else if (this.selectedType === 'audio') {
            results.push({
              id: Date.now() + i,
              type: 'audio',
              url: '/static/audio-placeholder.mp3',
              description: this.inputDescription
            })
          } else if (this.selectedType === 'text') {
            results.push({
              id: Date.now() + i,
              type: 'text',
              content: `根据您的描述"${this.inputDescription}"，我为您创作了以下内容：这是一段基于您输入的创意文本，融合了动漫元素和丰富的想象力。`
            })
          }
        }
        
        this.generatedResults = results
        
        uni.showToast({
          title: '生成成功！',
          icon: 'success'
        })
      }, 3000)
    },
    previewImage(url) {
      uni.previewImage({
        urls: [url]
      })
    },
    playAudio(result) {
      uni.showToast({
        title: '播放音频',
        icon: 'none'
      })
    },
    downloadResult(result) {
      uni.showToast({
        title: '开始下载',
        icon: 'success'
      })
    },
    shareResult(result) {
      uni.showActionSheet({
        itemList: ['分享给好友', '保存到相册', '复制链接'],
        success: (res) => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        }
      })
    },
    copyText(result) {
      uni.setClipboardData({
        data: result.content,
        success: () => {
          uni.showToast({
            title: '已复制到剪贴板',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.multimodal-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6, #F8F8FF);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
}

.nav-back {
  padding: 15rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #FF69B4;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-actions {
  padding: 15rpx;
}

.nav-icon {
  font-size: 28rpx;
}

.content-scroll {
  height: calc(100vh - 120rpx);
  padding: 0 30rpx;
}

.type-section,
.input-section,
.style-section,
.audio-section,
.options-section {
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #FF69B4;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.type-card {
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.type-card.active {
  border-color: #FF69B4;
  background: #FFF0F5;
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 24rpx rgba(255, 105, 180, 0.2);
}

.type-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 15rpx;
}

.type-name {
  display: block;
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.type-desc {
  font-size: 22rpx;
  color: #666;
  line-height: 1.4;
}

.description-textarea {
  width: 100%;
  height: 200rpx;
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 15rpx;
  padding: 25rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  resize: none;
}

.description-textarea:focus {
  border-color: #FF69B4;
}

.placeholder {
  color: #999;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}

.style-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.style-option {
  background: white;
  border: 2rpx solid #F0F0F0;
  border-radius: 16rpx;
  padding: 24rpx;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.style-option:hover,
.style-option.selected {
  border-color: #FF69B4;
  background: #FFF0F5;
}

.style-name {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.style-desc {
  display: block;
  font-size: 22rpx;
  color: #888;
}

.generate-options {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-top: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.option-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 24rpx;
  font-weight: bold;
}

.option-group {
  margin-bottom: 32rpx;
}

.option-label {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.generate-button {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #FF69B4, #FF1493);
  border: none;
  border-radius: 44rpx;
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.generate-button:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 32rpx rgba(255, 105, 180, 0.3);
}

.generate-button:disabled {
  background: #CCC;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.result-section {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx;
  margin-top: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.result-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 24rpx;
  font-weight: bold;
}

.result-content {
  min-height: 200rpx;
  background: #F8F8F8;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.result-actions {
  display: flex;
  gap: 16rpx;
}

.action-button {
  flex: 1;
  height: 64rpx;
  background: #FF69B4;
  border: none;
  border-radius: 32rpx;
  color: white;
  font-size: 26rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:hover {
  background: #FF1493;
}

.action-button.secondary {
  background: #F0F0F0;
  color: #666;
}

.action-button.secondary:hover {
  background: #E0E0E0;
}
</style>